import { FormRowCol } from "@/components/common/FormRowCol.tsx";
import {
  Button,
  Input,
  InputNumber,
  message,
  Modal,
  Select,
  Space,
} from "antd";
import { useState } from "react";
import { ReactAceEditor } from "@/components/common/ReactAceEditor.tsx";
import { DataPenType } from "@/components/Configuration/PenProps/components/DataPen.tsx";

interface NumberTypeProps {
  numberItem: DataPenType;
  onNumberChange: (key: keyof DataPenType, value: string | number) => void;
}

function NumberType(props: NumberTypeProps) {
  return (
    <>
      <Space
        style={{ padding: 10, paddingTop: 0 }}
        className={"w-full"}
        direction="vertical"
      >
        <FormRowCol label={"最小值"} labelSpan={6} valueSpan={18}>
          <InputNumber
            className={"w-full"}
            value={props.numberItem.min}
            onChange={(value) => props.onNumberChange("min", value || 0)}
          ></InputNumber>
        </FormRowCol>
        <FormRowCol label={"最大值"} labelSpan={6} valueSpan={18}>
          <InputNumber
            className={"w-full"}
            value={props.numberItem.max}
            onChange={(value) => props.onNumberChange("max", value || 0)}
          ></InputNumber>
        </FormRowCol>
        <FormRowCol label={"步长"} labelSpan={6} valueSpan={18}>
          <InputNumber
            className={"w-full"}
            value={props.numberItem.step}
            onChange={(value) => props.onNumberChange("step", value || 0)}
          ></InputNumber>
        </FormRowCol>
        <FormRowCol label={"精度"} labelSpan={6} valueSpan={18}>
          <InputNumber
            className={"w-full"}
            value={props.numberItem.precision}
            onChange={(value) => props.onNumberChange("precision", value || 0)}
          ></InputNumber>
        </FormRowCol>
      </Space>
    </>
  );
}

function SelectType({ onOk }: { onOk: (code: string) => void }) {
  const [open, setOpen] = useState(false);
  let valueCode = `[
        { value: 'jack', label: 'Jack' },
        { value: 'lucy', label: 'Lucy' },
        { value: 'Yiminghe', label: 'yiminghe' },
        { value: 'disabled', label: 'Disabled' }
  ]`;

  return (
    <Space
      style={{ padding: 10, paddingTop: 0 }}
      className={"w-full"}
      direction="vertical"
    >
      <ReactAceEditor
        tip={"label:选项名，value:选项值"}
        onCancel={() => setOpen(false)}
        onOk={(codeText) => {
          onOk(codeText);
          setOpen(false);
        }}
        open={open}
        value={valueCode}
      />
      <FormRowCol label={""} labelSpan={6} valueSpan={18}>
        <Button block type={"primary"} onClick={() => setOpen(true)}>
          配置选项
        </Button>
      </FormRowCol>
    </Space>
  );
}

export function AddPenData({
  open,
  onClose,
  onOk,
  value,
  onChange,
}: {
  open: boolean;
  onClose: () => void;
  onOk: () => void;
  value: DataPenType;
  onChange: (key: keyof DataPenType, value: string | number) => void;
}) {
  const [messageApi, contextHolder] = message.useMessage();
  const handleAdd = () => {
    if (!value.key || value.name == "") {
      messageApi.warning("名称不能为空!");
      return false;
    }
    onOk();
  };
  return (
    <Modal
      title="添加数据"
      open={open}
      onOk={handleAdd}
      onCancel={onClose}
      okText={"确定"}
      cancelText={"取消"}
    >
      {contextHolder}
      <Space
        style={{ padding: "10px" }}
        className={"w-full"}
        direction="vertical"
      >
        <FormRowCol label={"显示名称"} labelSpan={6} valueSpan={18}>
          <Input
            value={value.name}
            onChange={(e) => onChange("name", e.target.value)}
          ></Input>
        </FormRowCol>
        <FormRowCol label={"属性名"} labelSpan={6} valueSpan={18}>
          <Input
            value={value.key}
            onChange={(e) => onChange("key", e.target.value)}
          ></Input>
        </FormRowCol>
        <FormRowCol label={"提示文字"} labelSpan={6} valueSpan={18}>
          <Input
            value={value.placeholder}
            onChange={(e) => onChange("placeholder", e.target.value)}
          ></Input>
        </FormRowCol>
        <FormRowCol label={"类型"} labelSpan={6} valueSpan={18}>
          <Select
            defaultValue="text"
            className={"w-full"}
            value={value.type}
            onChange={(key) => onChange("type", key)}
            options={[
              { value: "text", label: "文本" },
              { value: "number", label: "数字" },
              { value: "color", label: "颜色" },
              { value: "textarea", label: "多行文本" },
              { value: "select", label: "下拉框" },
              { value: "switch", label: "开关" },
              { value: "code", label: "代码" },
              { value: "slider", label: "滑块" },
            ]}
          />
        </FormRowCol>
      </Space>
      {value.type == "number" && (
        <NumberType numberItem={value} onNumberChange={onChange} />
      )}
      {value.type == "slider" && (
        <NumberType numberItem={value} onNumberChange={onChange} />
      )}
      {value.type == "select" && (
        <SelectType
          onOk={(c) => {
            onChange("options", eval(c));
          }}
        />
      )}
    </Modal>
  );
}
